<!DOCTYPE HTML>
<html> 
<head>
<script language="javascript">
function draw(){
    var ctx = document.getElementById('myCanvas').getContext("2d");
    ctx.translate(200,20);
    for (var i=1;i<90;i++){
        ctx.save();
        ctx.transform(0.95,0,0,0.95,30,30);
        ctx.rotate(Math.PI/12);
        ctx.beginPath();
        ctx.fillStyle="red";
        ctx.globalAlpha="0.4";
        ctx.arc(0,0,50,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
    }
    ctx.setTransform(1,0,0,1,10,10);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,50,50);
    ctx.fill();
}
window.onload=function(){
    draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>
